<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <!-- dialog对话框组件： visible.sync="bool值" -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">

      <span>这是一段信息</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
    }
  };
</script>